<template>
	<view>
		<page-head title="下载测试"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<block style="margin-top: 50px;">
				<view class="uni-hello-text">点击按钮下载网络文件到本地临时目录</view>
				<view class="uni-btn-v">
					<view>下载进度1</view>
					<progress :percent="percent1" :show-info="true" stroke-width="3" />
					<view>下载进度2</view>
					<progress :percent="percent2" :show-info="true" stroke-width="3" />
					<button type="primary" @tap="toDownLoad">下载测试</button>
					<button type="primary" @tap="pause('test01')">暂停任务1</button>
					<button type="primary" @tap="goTo('test01')">继续任务1</button>
					<button type="primary" @tap="pause('test02')">暂停任务2</button>
					<button type="primary" @tap="goTo('test02')">继续任务2</button>
					<!-- <button type="primary" @tap="getProgress">获取下载进度</button> -->
				</view>
			</block>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			percent1: 0,
			percent2: 0
		};
	},
	onUnload() {
	},
	methods: {
		toDownLoad() {
			this.downloadFile(
				'http://58.34.36.138:18480/nasforward/file/download?filenamepath=%2Fabc.mp4&offset=0&bufsize=&fileName=abc.mp4&uploadToken=NAS_UPLOAD_806d5fc5f12980c72040d9cfd63ad124',
				'test01',
				progress => {
					// console.log(progress)
					this.percent1 = progress;
					// console.log(this.percent1, 'this.percent1')
				},
				success => {
					console.log(success, 'success');
				}
			);
			this.downloadFile(
				'http://58.34.36.138:18480/nasforward/file/download?filenamepath=%2Fabc.mp4&offset=0&bufsize=&fileName=abc.mp4&uploadToken=NAS_UPLOAD_806d5fc5f12980c72040d9cfd63ad124',
				'test02',
				progress => {
					// console.log(progress)
					this.percent2 = progress;
				},
				success => {
					console.log(success, 'success');
				}
			);
		},
		downloadFile(url, name, cb1, cb2) {
			let progressVal = 0;
			this[name] = plus.downloader.createDownload(
				url,
				{
					filename: '_downloads/' + name //利用保存路径，实现下载文件的重命名
				},
				function(d, status) {
					//d为下载的文件对象
					if (status == 200) {
						console.log('下载成功', d);
						//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
						// var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
						// plus.runtime.openFile(d.filename); //选择软件打开文件
					} else {
						//下载失败
						console.log('下载失败', d);
						// plus.downloader.clear(); //清除下载任务
					}
				}
			);
			this[name].addEventListener('statechanged', task => {
				if (!this[name]) {
					return;
				}
				switch (task.state) {
					case 1:
						console.log('开始下载');
						break;
					case 2:
						console.log('链接到服务器...');
						break;
					case 3:
						progressVal = Math.floor(this.changeTwoDecimal_f(task.downloadedSize / task.totalSize)*100);
						if (cb1) cb1(progressVal);
						break;
					case 4:
						// console.log('监听下载完成');
						if (cb2) cb2('监听下载完成');
						break;
				}
			});
			this[name].start();
		},
		// 暂停下载任务
		pause(name) {
			this[name].pause();
		},
		// 继续下载任务
		goTo(name) {
			this[name].resume();
		},
		changeTwoDecimal_f(x) {
			var f_x = parseFloat(x);
			if (isNaN(f_x)) {
				return 0;
			}
			var f_x = Math.round(x * 100) / 100;
			var s_x = f_x.toString();
			var pos_decimal = s_x.indexOf('.');
			if (pos_decimal < 0) {
				pos_decimal = s_x.length;
				s_x += '.';
			}
			while (s_x.length <= pos_decimal + 2) {
				s_x += '0';
			}
			return s_x;
		}
	}
};
</script>

<style>
.img {
	width: 500rpx;
	height: 500rpx;
	margin: 0 auto;
}
.image-container {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
